<template>
  <div class="payment-result">
    <div class="result-container" :class="paymentStatus === 'success' ? 'success' : 'failure'">
      <div class="icon-wrapper">
        <div v-if="paymentStatus === 'success'" class="success-icon">
          <i class="iconfont icon-success"></i>
        </div>
        <div v-else class="failure-icon">
          <i class="iconfont icon-failure"></i>
        </div>
      </div>
      
      <h1 class="result-title">{{ paymentStatus === 'success' ? '支付成功' : '支付失败' }}</h1>
      
      <div class="result-details">
        <p v-if="orderInfo.order_sn" class="order-number">
          订单号: {{ orderInfo.order_sn }}
        </p>
        <p v-if="orderInfo.order_amount" class="amount">
          支付金额: ¥{{ orderInfo.order_amount }}
        </p>
        <p v-if="orderInfo.pay_time && paymentStatus === 'success'" class="pay-time">
          支付时间: {{ formatTime(orderInfo.pay_time) }}
        </p>
        <p v-if="errorMsg && paymentStatus === 'failure'" class="error-message">
          失败原因: {{ errorMsg }}
        </p>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="goToHome">返回首页</el-button>
        <el-button v-if="paymentStatus === 'failure'" @click="tryAgain">重新支付</el-button>
        <el-button v-if="paymentStatus === 'success'" @click="goToUserCenter">查看订单</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

const orderInfo = ref({});
const errorMsg = ref('');
const loading = ref(false);

// 从URL参数中获取订单号
const outTradeNo = computed(() => route.query.out_trade_no || '');
const paymentStatus = computed(() => {
  if (!orderInfo.value) return 'failure';
  return orderInfo.value.pay_status === 1 ? 'success' : 'failure';
});

// 格式化时间显示
const formatTime = (time) => {
  if (!time) return '';
  return time;
};

// 查询订单状态
const queryOrderStatus = async () => {
  if (!outTradeNo.value) {
    errorMsg.value = '订单号不能为空';
    return;
  }

  loading.value = true;
  try {
    const response = await axios.get('/api/v6/pay_status/index', {
      params: { out_trade_no: outTradeNo.value }
    });

    if (response.data.code === 0) {
      orderInfo.value = response.data.data;
    } else {
      errorMsg.value = response.data.msg || '查询订单失败';
    }
  } catch (error) {
    console.error('查询订单出错:', error);
    errorMsg.value = '网络错误，请稍后再试';
  } finally {
    loading.value = false;
  }
};

// 返回首页
const goToHome = () => {
  router.push('/');
};

// 重新支付
const tryAgain = () => {
  // 跳转到充值页面，并带上套餐类型参数
  if (orderInfo.value && orderInfo.value.combo_type) {
    router.push({
      path: '/recharge',
      query: { type: orderInfo.value.combo_type }
    });
  } else {
    router.push('/recharge');
  }
};

// 查看订单（跳转到用户中心）
const goToUserCenter = () => {
  router.push('/user/orders');
};

onMounted(() => {
  queryOrderStatus();
});
</script>

<style scoped>
.payment-result {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

.result-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
  margin-bottom: 24px;
}

.success-icon, .failure-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.success-icon {
  background-color: #f0f9eb;
  color: #67c23a;
}

.failure-icon {
  background-color: #fef0f0;
  color: #f56c6c;
}

.icon-wrapper i {
  font-size: 48px;
}

.result-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
}

.success .result-title {
  color: #67c23a;
}

.failure .result-title {
  color: #f56c6c;
}

.result-details {
  margin-bottom: 32px;
  text-align: left;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 20px 0;
}

.result-details p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

.error-message {
  color: #f56c6c;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 768px) {
  .result-container {
    padding: 24px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
}
</style>
